<template>
  <div class="v-model-demo">
    <input
      type="email"
      class="form-control"
      id="exampleFormControlInput1"
      placeholder="name@example.com"
      @input="onUpdateValue"
      :value="inputRef.value"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  props: {
    rules: {
      type: Array
    },
    modelValue: String,
    title: String
  },
  setup(props, context) {
    const inputRef = reactive({
      value: props.modelValue || ''
    })

    const onUpdateValue = (e: KeyboardEvent) => {
      const target = e.target as HTMLInputElement
      inputRef.value = target.value
      console.log('target:', target.value)
      context.emit('update:modelValue', target.value)
    }
    return {
      inputRef,
      onUpdateValue
    }
  }
})
</script>
